<template>
  <van-form>
    <van-field class="formOperation" v-model="formData.code" name="空投码" placeholder="请输入空投码" />
    <van-button type="primary" class="block_btn" :loading="formData.loading" @click="Submit">确定</van-button>
  </van-form>
  <div class="tips">
    <p> 1.一个空投兑换码仅可使用一次，兑换码使用后无效</p>
    <p>2.使用空投码不需要支付额外的费用</p>
    <p>3.兑换成功的藏品可在“藏品”页查看</p>
  </div>
</template>
<script>
import { defineComponent, reactive, computed, onMounted, ref } from 'vue'
import { Toast } from "vant";
import { useRouter } from 'vue-router'
import { setLocal } from "@/utils/localStorage";
import { airrevice } from "@/api/public"
export default defineComponent({
  setup() {
    const router = useRouter()
    const formData = reactive({
      code: "",
      loading: false

    })
    const Submit = async () => {
      console.log(formData.code)
      if (formData.code) {
        formData.loading = true
      }
      const data = {
        code: formData.code
      }
      const res = await airrevice(data)
      if (res.data.success) {
        Toast("兑换成功")
      }
      formData.loading = false
    }


    return {
      formData,
      Submit,
    }
  },
})
</script> 
<style lang="less" scoped>
&:deep(.van-cell) {
  width: 684px;
  height: 100px;
  background: #282a2c;
  border: 1px solid #ffffff;
  border-radius: 18px;
  margin: 20px auto;
}

.block_btn {
  display: block;
  margin: 60px auto 0px;
  border: none;
  width: 682px;
  height: 92px;
  background: linear-gradient(-90deg, #37dc6d, #34d1f9);
  border-radius: 46px;
}

.tips {
  margin: 40px 30px;

  p {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #ffffff;
    line-height: 48px;
    opacity: 0.9;
  }
}
</style>